<template>
	<view class="pages">
		<view class="nav">
			<cu-custom :isBack="true" :isTar="true" bgColor="bg-gragients text-white">
				<block slot="leftText"></block>
				<block slot="content">强夯监测</block>
				<block slot="righttar"></block>
			</cu-custom>
		</view>
		<view class="backmap" style="position: fixed; top:160rpx;width: 100%;z-index: 1;">
			<MapContainer v-if="isReady" ref="refMap" :mapUrl='mapUrl' :holeDetail="holeDetail"></MapContainer>
		</view>

		<view class="tabbox" style="z-index: 666666">
				<view class="tab" @click="to_control">
					<image :src="control ? '../../static/2/1.png' : '../../static/2/1.1.png' " mode=""></image>
					<text>实时监控</text>
				</view>
				<view class="tab" @click="to_mark" style="border: none;">
					<image :src="mark ? '../../static/2/2.png' : '../../static/2/2.1.png' " mode=""></image>
					<text>正式作业</text>
				</view>

			</view>
			<view class="content" style="z-index: 666666;position: absolute;bottom: 0;">

			<!-- //夯孔详情 -->
			<view v-if="xiangqing" style="position: relative;margin-top: 360rpx;">
				<view style="margin-bottom: 30rpx;height: 260px;background: #eee;width: 95%;margin: 0 auto;border-radius: 20rpx;padding-left: 10rpx;font-size: 30rpx;">

					<view style="border-bottom: 1px solid #999;padding-top: 20rpx;padding-bottom: 20rpx;">夯孔详情 <span style="font-size: 26rpx;color:orange;padding-left: 16rpx;">合格</span></view>
					<view style="width: 100%;font-size: 24rpx;padding-top: 30rpx;">
					<view style="margin-bottom: 100rpx;">
						<view style="width: 33%;float: left;text-align: center;">夯击编号</view>
						<view style="width: 33%;float: left;text-align: center;">强夯类型</view>
						<view style="width: 33%;float: left;text-align: center;">夯击标准次数</view>
						<view style="width: 33%;float: left;text-align: center;">{{qingObj.deviceCode}}</view>
						<view style="width: 33%;float: left;text-align: center;">{{qingObj.hgRate}}</view>
						<view style="width: 33%;float: left;text-align: center;">{{qingObj.stateCount}}</view>
					</view>
						<view style="margin-bottom: 200rpx;">
							<view style="width: 33%;float: left;text-align: center;">桩号</view>
							<view style="width: 33%;float: left;text-align: center;">总夯沉量/cm</view>
							<view style="width: 33%;float: left;text-align: center;">平均夯沉量/cm</view>
							<view style="width: 33%;float: left;text-align: center;">{{qingObj.stakeNumber}}</view>
							<view style="width: 33%;float: left;text-align: center;">{{qingObj.allHcl}}</view>
							<view style="width: 33%;float: left;text-align: center;">{{qingObj.avgHcl}}</view>
						</view>
						<view>
							<view style="width: 33%;float: left;text-align: center;">锤量/t</view>
							<view style="width: 33%;float: left;text-align: center;">锤半斤/m</view>
							<view style="width: 33%;float: left;text-align: center;">{{qingObj.hammerWeight}}</view>
							<view style="width: 33%;float: left;text-align: center;">{{qingObj.hammerRadius}}</view>
						</view>

					</view>
				</view>
				<view style="height: 260px;background: #eee;width: 95%;margin: 0 auto;border-radius: 20rpx;padding-left: 10rpx;font-size: 30rpx;margin-top: 10rpx;">
					<view style="border-bottom: 1px solid #999;padding-top: 20rpx;padding-bottom: 20rpx;height: 40rpx;font-size: 24rpx;">
						<view style="width: 25%;text-align: center;float: left;">序号</view>
						<view style="width: 25%;text-align: center;float: left;">落距/m</view>
						<view style="width: 25%;text-align: center;float: left;">夯机能/KN.m</view>
						<view style="width: 25%;text-align: center;float: left;">中心距/cm</view>
					</view>
					<view style="font-size: 24rpx;padding-bottom: 10rpx;" v-for="itq in qingObj.hjStakeDetailList">
						<view style="width: 25%;text-align: center;float: left;">{{itq.xuhao}}</view>
						<view style="width: 25%;text-align: center;float: left;">{{itq.hammerDropDistance}}</view>
						<view style="width: 25%;text-align: center;float: left;">{{itq.hjEnergy}}</view>
						<view style="width: 25%;text-align: center;float: left;">{{itq.hjDistance}}</view>
					</view>
					<view style="font-size: 24rpx;">
						<view style="width: 25%;text-align: center;float: left;">1</view>
						<view style="width: 25%;text-align: center;float: left;">3.56</view>
						<view style="width: 25%;text-align: center;float: left;">1222.22</view>
						<view style="width: 25%;text-align: center;float: left;">186.22</view>
					</view>
				</view>
			</view>

			<!-- 强夯点击地图上车辆页面 -->
			<view v-if="cheliang">
				<view style="margin-bottom: 30rpx;height: 260px;background: #eee;width: 95%;margin: 0 auto;border-radius: 20rpx;padding-left: 10rpx;font-size: 30rpx;">

					<view style="border-bottom: 1px solid #999;padding-top: 20rpx;padding-bottom: 20rpx;">陕A66666 <span style="font-size: 26rpx;color:orange;padding-left: 16rpx;">在线</span></view>
					<view style="width: 100%;font-size: 24rpx;padding-top: 30rpx;">
					<view style="margin-bottom: 100rpx;">
						<view style="width: 33%;float: left;text-align: center;">作业类型</view>
						<view style="width: 33%;float: left;text-align: center;">当前桩夯击次数</view>
						<view style="width: 33%;float: left;text-align: center;">中锤高度/m</view>
						<view style="width: 33%;float: left;text-align: center;">满夯</view>
						<view style="width: 33%;float: left;text-align: center;">222</view>
						<view style="width: 33%;float: left;text-align: center;">223</view>
					</view>
						<view style="margin-bottom: 200rpx;">
							<view style="width: 33%;float: left;text-align: center;">设备朝向</view>
							<view style="width: 33%;float: left;text-align: center;">转折点高度/m</view>
							<view style="width: 33%;float: left;text-align: center;">锤重/t</view>
							<view style="width: 33%;float: left;text-align: center;">向上</view>
							<view style="width: 33%;float: left;text-align: center;">222</view>
							<view style="width: 33%;float: left;text-align: center;">223</view>
						</view>
						<view>
							<view style="width: 33%;float: left;text-align: center;">锤半斤/m</view>
							<view style="width: 33%;float: left;text-align: center;">223</view>
						</view>

					</view>
				</view>
			</view>

			<!-- 点击遍数 -->
			<view v-if="bianshu" style="position: fixed;bottom: 10px;width: 100%;">
				<view style="margin-bottom: 30rpx;height: 260px;background: #FFFFFF;width: 95%;margin: 0 auto;border-radius: 20rpx;padding-left: 10rpx;font-size: 30rpx;">
					<view style="border-bottom: 1px solid #999;padding-top: 20rpx;padding-bottom: 20rpx;" @click="bianshu = false,isRang = true">夯孔详情 <span style="font-size: 26rpx;color:orange;padding-left: 16rpx;">合格</span></view>
					<view style="width: 100%;font-size: 24rpx;padding-top: 30rpx;">
					<view style="margin-bottom: 100rpx;">
						<view style="width: 33%;float: left;text-align: center;">夯击总数</view>
						<view style="width: 33%;float: left;text-align: center;">强夯遍数</view>
						<view style="width: 33%;float: left;text-align: center;">夯击总次数</view>
						<view style="width: 33%;float: left;text-align: center;">{{dianObj.total}}</view>
						<view style="width: 33%;float: left;text-align: center;">{{dianObj.heavyTimes}}</view>
						<view style="width: 33%;float: left;text-align: center;">{{dianObj.totalTimes}}</view>
					</view>
						<view style="margin-bottom: 200rpx;">
							<view style="width: 33%;float: left;text-align: center;">平均夯沉量/cm</view>
							<view style="width: 33%;float: left;text-align: center;">平均夯机能/KN.m</view>
							<view style="width: 33%;float: left;text-align: center;">单桩标准击数</view>
							<view style="width: 33%;float: left;text-align: center;">{{dianObj.avgHcl}}</view>
							<view style="width: 33%;float: left;text-align: center;">{{dianObj.standardRammer}}</view>
							<view style="width: 33%;float: left;text-align: center;">{{dianObj.standardBlowCount}}</view>
						</view>
						<view style="margin-bottom: 200rpx;">
							<view style="width: 33%;float: left;text-align: center;">标准中心距/cm</view>
							<view style="width: 33%;float: left;text-align: center;">锤重/t</view>
							<view style="width: 33%;float: left;text-align: center;">标准落距/m</view>
							<view style="width: 33%;float: left;text-align: center;">{{dianObj.standardCenterDistance}}</view>
							<view style="width: 33%;float: left;text-align: center;">{{dianObj.hammerWeight}}</view>
							<view style="width: 33%;float: left;text-align: center;">{{dianObj.standardFallDistance}}</view>
						</view>
						<view>
							<view style="width: 33%;float: left;text-align: center;">锤半径/m</view>
							<view style="width: 33%;float: left;text-align: center;visibility: hidden;">锤半径/m</view>
							<view style="width: 33%;float: left;text-align: center;visibility: hidden;">锤半径/m</view>
							<view style="width: 33%;float: left;text-align: center;">{{dianObj.hammerRadius}}</view>
						</view>
					</view>
				</view>
				<view style="margin-top: 16rpx;">
					<view style="margin-bottom: 30rpx;height: 200rpx;background: #FFFFFF;width: 95%;margin: 0 auto;border-radius: 20rpx;padding-left: 10rpx;font-size: 30rpx;">
						<view style="border-bottom: 1px solid #999;padding-top: 20rpx;padding-bottom: 20rpx;">车牌号</view>
						<view style="width: 100%;font-size: 24rpx;padding-top: 30rpx;">
						<view style="margin-bottom: 100rpx;">
							<view style="width: 33%;float: left;text-align: center;">zyTest01</view>
							<view style="width: 33%;float: left;text-align: center;">zyTest01</view>
							<view style="width: 33%;float: left;text-align: center;">zyTest01</view>
						</view>
						</view>
					</view>
				</view>
			</view>



			<view>
				<!-- 普通弹窗 -->
				<uni-popup ref="popup">
					<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">

					</view>
				</uni-popup>
			</view>

			<view class="controls" v-if="control">
				<view class="map">

				</view>
				<view class="" @click="to_map_car">
					<image src="../../static/2/01.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
				</view>
				<view class="" @click="to_hangkong">
					<image src="../../static/2/01.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
				</view>



				<view class="item" v-if="control_index">
					<view class="item_cont">
						<view class="item_search" @click="to_search()">
							<input type="text" value="" placeholder="请选择项目" />
							<image src="../../static/2/00.png" mode=""></image>
						</view>
						<view class="item_headtab">
							<text @click="quanbus" :style="quanbu ? 'background-color: #FFFFFF;' : 'background-color: #e6e6e6;' ">全部</text>
							<text @click="manhangs" :style="manhang ? 'background-color: #FFFFFF;' : 'background-color: #e6e6e6;' ">满夯</text>
							<text @click="dianhangs" :style="dianhang ? 'background-color: #FFFFFF;' : 'background-color: #e6e6e6;' ">点夯</text>
						</view>
						<view class="item_head">
							<view class="head_tab" @click="to_porject">
								<text>施工区域</text>
								<view class="" v-if="isporject">

								</view>
							</view>
							<view class="head_tab" @click="to_car">
								<text>车辆</text>
								<view class="" v-if="iscar">

								</view>
							</view>
						</view>
						<view class="" v-if="isporject" style="height: 190px;overflow: auto;">
							<view class="item_li" style="color: #C0C0C0;">
								<text class="text1">工区</text>
								<text class="text2">开始时间</text>
								<image src="../../static/2/11.png" mode=""></image>
							</view>

							<!-- <view class="" style="height: 320rpx;overflow: auto;">
								<view class="item_li" @click="toselect">
									<text class="text1">001#工区</text>
									<text class="text2">2021/08/01/ 12:00:00</text>
							 -->
							<view class="" v-for="(tt,indx) in qianghanglist">
								<view class="item_li" style="padding-top: 20rpx;" @click="toselect(tt)">
									<text class="text1">{{tt.areaName}}</text>
									<text class="text2">{{tt.startTime}}</text>
									<image :src="tt.isimg ?'../../static/2/10.png' : '../../static/2/11.png'" mode="">
									</image>
								</view>

							</view>

						</view>
						<view class="" v-if="iscar" style="height: 190px;overflow: auto;">
							<view class="item_li" style="color: #C0C0C0;">
								<text style="width: 80rpx;text-align: center;">状态</text>
								<text style="width: 140rpx;text-align: center;">车牌号</text>

								<text style="width: 100rpx;text-align: center;">作业类型</text>
								<image src="../../static/2/11.png" mode=""></image>
							</view>

							<view class="">
									<view class="item_li" @click="toselect2(ite)"  v-for="ite in cheList">
										<text
											style="width: 80rpx;text-align: center;background-color: #d8f5d8;color: #3ecf3b;border-radius: 20rpx;">{{ite.status}}</text>
										<text style="width: 140rpx;text-align: center;">{{ite.vehicleDesc}}</text>

									<text v-if="socketDetial.workModel == '1'" style="width: 100rpx;text-align: center;">点夯</text>
									<text v-else style="width: 100rpx;text-align: center;">满夯</text>
									<image :src="ite.isimg2 ?'../../static/2/10.png' : '../../static/2/11.png'" mode="">
									</image>
								</view>

							</view>

						</view>


					</view>
					<view class="item_foot">
						<view class="item_tab">
							<image src="../../static/2/01.png" mode=""></image>
							<text>总数 20</text>
						</view>
						<view class="item_tab" @click="online">
							<image src="../../static/2/02.png" mode=""></image>
							<text>在线 10</text>
						</view>
						<view class="item_tab">
							<text>10</text>
							<text>一小时内在线数</text>
						</view>
					</view>
				</view>

				<view>
					<!-- 普通弹窗 -->
					<uni-popup ref="popup" @change="change">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<view class="pop_box">
								<view class="pop_search">
									<text class="cuIcon-search"></text>
									<input type="text" value="" placeholder="请输入项目" />
									<text class="text3">搜索</text>
								</view>
								<view class="pop_cont">
									<view class="pop_item" @click="to_porjectLi()" v-for="itm in projectDate">
										<text>{{itm.name}}</text>
										<image src="../../static/2/20.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</uni-popup>
				</view>

				<view>
					<!-- 普通弹窗 -->
					<uni-popup ref="popupLi" @change="change">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<view class="porjiectLi">

								<view class="item">
									<view class="item_cont">
										<view class="item_search" @click="to_search()">
											<input type="text" value="" placeholder="请选择项目" />
											<image src="../../static/2/00.png" mode=""></image>
										</view>

										<view class="item_headtab">
											<text @click="quanbus" :style="quanbu ? 'background-color: #FFFFFF;' : 'background-color: #e6e6e6;' ">全部</text>
											<text @click="manhangs" :style="manhang ? 'background-color: #FFFFFF;' : 'background-color: #e6e6e6;' ">满夯</text>
											<text @click="dianhangs" :style="dianhang ? 'background-color: #FFFFFF;' : 'background-color: #e6e6e6;' ">点夯</text>
										</view>

										<view class="item_head">
											<view class="head_tab" @click="to_porject">
												<text>施工区域</text>
												<view class="" v-if="isporject">

												</view>
											</view>
											<view class="head_tab" @click="to_car">
												<text>车辆</text>
												<view class="" v-if="iscar">

												</view>
											</view>
										</view>
										<view class="" v-if="isporject">
											<view class="item_li" style="color: #C0C0C0;">
												<text class="text1">工区</text>
												<text class="text2">开始时间</text>
												<image src="../../static/2/11.png" mode=""></image>
											</view>

											<!-- <view class="" style="height: 320rpx;overflow: auto;">
												<view class="item_li" @click="toselect">
													<text class="text1">001#工区</text>
													<text class="text2">2021/08/01/ 12:00:00</text>
													<image
														:src="isimg ?'../../static/2/10.png' : '../../static/2/11.png'"
														mode=""></image>
												</view>

											</view> -->

										</view>
										<view class="" v-if="iscar">
											<view class="item_li" style="color: #C0C0C0;">
												<text style="width: 80rpx;text-align: center;">状态</text>
												<text style="width: 140rpx;text-align: center;">车牌号</text>

												<text style="width: 100rpx;text-align: center;">作业类型</text>
												<image src="../../static/2/11.png" mode=""></image>
											</view>

											<view class="" style="height: 320rpx;overflow: auto;">
												<!-- <view class="item_li" @click="toselect2">
													<text
														style="width: 80rpx;text-align: center;background-color: #d8f5d8;color: #3ecf3b;border-radius: 20rpx;">在线</text>
													<text style="width: 140rpx;text-align: center;">陕A35888</text>

													<text style="width: 100rpx;text-align: center;">满夯</text>
													<image
														:src="isimg2 ?'../../static/2/10.png' : '../../static/2/11.png'"
														mode=""></image>
												</view> -->

											</view>

										</view>


									</view>
									<view class="item_mid" >
										<view class="title1">
											强夯详情
										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">标段信息</text>
												<text>基础建设</text>
											</view>
											<view class="cont_li">
												<text class="title0">施工单位</text>
												<text>南三地基与基础建设</text>
											</view>
											<view class="cont_li">
												<text class="title0">监理单位</text>
												<text>建设标段</text>
											</view>

										</view>
									</view>
									<view class="item_foot" >
										<view class="title">
											项目名称/南三地基与基础建设标段K-3
										</view>
										<view class="cont">
											<text>2021.08.01 12:00:00 </text>
											<text style="color: #c0c0c0;">至</text>
											<text>2021.08.12 12:00:00</text>

										</view>
									</view>

								</view>
							</view>
						</view>
					</uni-popup>
				</view>


				<view>
					<!-- 普通弹窗 -->
					<uni-popup ref="popupCar" @change="change">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<view class="carLi">

								<view class="item">

									<view id="item_cont">
										<view class="title1">
											<text>陕A85622</text>
											<text
												style="padding: 5rpx 20rpx;background-color: #d8f5d8;font-size: 20rpx;border-radius: 20rpx;margin: 0 20rpx;color: #3ecf3b;">在线</text>
																					</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">时速/m</text>
												<text>11</text>
											</view>
											<view class="cont_li">
												<text class="title0">高程/m</text>
												<text>6</text>
											</view>
											<view class="cont_li">
												<text class="title0">振动</text>
												<text>555</text>
											</view>

										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">时速/m</text>
												<text>11</text>
											</view>
											<view class="cont_li">
												<text class="title0">高程/m</text>
												<text>6</text>
											</view>


										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">时速/m</text>
												<text>11</text>
											</view>
											<view class="cont_li">
												<text class="title0">高程/m</text>
												<text>6</text>
											</view>


										</view>

									</view>


								</view>
							</view>
						</view>
					</uni-popup>
				</view>


				<view>
					<!-- 普通弹窗 -->
					<uni-popup ref="popupHangkong" @change="change">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<view class="hangkongxq">

								<view class="item">

									<view class="item_cont">
										<view class="title1">
											<text>夯孔详情</text>
											<text
												style="padding: 5rpx 20rpx;background-color: #fdeed8;font-size: 20rpx;border-radius: 20rpx;margin: 0 20rpx;color: #f6ac3b;">合格</text>
										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">夯击编号</text>
												<text>11</text>
											</view>
											<view class="cont_li">
												<text class="title0">强夯类型</text>
												<text>6</text>
											</view>
											<view class="cont_li">
												<text class="title0">夯击标准次数</text>
												<text>555</text>
											</view>

										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">桩号</text>
												<text>11</text>
											</view>
											<view class="cont_li">
												<text class="title0">总夯沉量/cm</text>
												<text>6</text>
											</view>
											<view class="cont_li">
												<text class="title0">平均夯沉量/cm</text>
												<text>6</text>
											</view>

										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">锤重/t</text>
												<text>11</text>
											</view>
											<view class="cont_li">
												<text class="title0">锤半径/m</text>
												<text>6</text>
											</view>


										</view>

									</view>

									<view class="item_cont2">
										<view class="cont" style="border-bottom: 1rpx #C0C0C0 solid;">
											<view class="cont_li">
												<text class="title0">序号</text>
											</view>
											<view class="cont_li">
												<text class="title0">落距/m</text>
											</view>
											<view class="cont_li">
												<text class="title0">夯机能/KN.m</text>
											</view>
											<view class="cont_li">
												<text class="title0">中心距</text>
											</view>

										</view>
										<view class="cont" >
											<view class="cont_li">
												<text class="title1">标准值</text>
											</view>
											<view class="cont_li">
												<text class="title1">3.67</text>
											</view>
											<view class="cont_li">
												<text class="title1">1000.00</text>
											</view>
											<view class="cont_li">
												<text class="title1">0.00</text>
											</view>

										</view>
										<view class="" style="width: 100%;height: 320rpx;overflow: auto;">
											<view class="cont">
												<view class="cont_li">
													<text>11</text>
												</view>
												<view class="cont_li">
													<text>6</text>
												</view>
												<view class="cont_li">
													<text>555</text>
												</view>
												<view class="cont_li">
													<text>555</text>
												</view>

											</view>

										</view>

									</view>


								</view>
							</view>
						</view>
					</uni-popup>
				</view>

				<view>
					<!-- 普通弹窗 -->
					<uni-popup ref="popupDianhong" @change="change">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<view class="dianHong">

								<view class="item">

									<view class="item_cont">
										<view class="title1">
											<text>点夯统计</text>
										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">夯击总数</text>
												<text>{{dianObj.total}}</text>
											</view>
											<view class="cont_li">
												<text class="title0">强夯遍数</text>
												<text>{{dianObj.heavyTimes}}</text>
											</view>
											<view class="cont_li">
												<text class="title0">夯击总次数</text>
												<text>{{dianObj.totalTimes}}</text>
											</view>

										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">平均夯沉量/cm</text>
												<text>{{dianObj.avgHcl}}</text>
											</view>
											<view class="cont_li">
												<text class="title0">平均夯机能/KN.m</text>
												<text>{{dianObj.standardRammer}}</text>
											</view>
											<view class="cont_li">
												<text class="title0">单桩标准击数</text>
												<text>{{dianObj.standardBlowCount}}</text>
											</view>

										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">标准中心距/cm</text>
												<text>{{dianObj.standardCenterDistance}}</text>
											</view>
											<view class="cont_li">
												<text class="title0">锤重/t</text>
												<text>{{dianObj.hammerWeight}}</text>
											</view>
										<view class="cont_li">
											<text class="title0">标准落距/m</text>
											<text>{{dianObj.standardFallDistance}}</text>
										</view>
										<!-- 			<view class="cont">
											<view class="cont_li">
												<text class="title0">锤半径/m</text>
												<text>{{dianObj.hammerRadius}}</text>
											</view>


										</view> -->


										</view>

									</view>

									<view class="item_cont2">
										<view class="cont" style="border-bottom: 1rpx #C0C0C0 solid;">
											<view class="cont_li">
												<text class="title0">序号</text>
											</view>

										</view>
										<view class="cont" >
											<view class="cont_li">
												<text class="title1">{{dianObj.vehicleInfoList[0].plateNumber}}</text>
											</view>
											<view class="cont_li">
												<text class="title1">{{dianObj.vehicleInfoList[0].plateNumber}}</text>
											</view>
											<view class="cont_li">
												<text class="title1">{{dianObj.vehicleInfoList[0].plateNumber}}</text>
											</view>
											<view class="cont_li">
												<text class="title1">{{dianObj.vehicleInfoList[0].plateNumber}}</text>
											</view>

										</view>


									</view>


								</view>
							</view>
						</view>
					</uni-popup>
				</view>



			</view>

			<view class="controls" v-if="mcontrol && isRang">
				<view class="map">
				</view>
				<view class="" @click="to_map_car">
					<image src="../../static/2/01.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
				</view>
				<view class="" @click="to_hangkong">
					<image src="../../static/2/01.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
				</view>
				<view class="item" v-if="mcontrol_index" style="height: auto;">
					<view class="item_cont" style="border-radius: 10px;background: #EEEEEE;">
						<view class="item_search" @click="to_search()">
							<input type="text" value="" placeholder="请选择项目" />
							<image src="../../static/2/00.png" mode=""></image>
						</view>
						<view class="item_headtab">
							<text @click="quanbus" :style="quanbu ? 'background-color: #FFFFFF;' : 'background-color: #e6e6e6;' ">全部</text>
							<text @click="manhangs" :style="manhang ? 'background-color: #FFFFFF;' : 'background-color: #e6e6e6;' ">满夯</text>
							<text @click="dianhangs" :style="dianhang ? 'background-color: #FFFFFF;' : 'background-color: #e6e6e6;' ">点夯</text>
						</view>
						<view>
							<p style="margin-left: 15px;background: #ddd;border-radius: 10px;width: 89px;font-size: 14px;text-align:center;margin-top: 6px;" @click="showBian = !showBian">请选择遍数</p>
							<view v-if="showBian" style="width: 100%;height:auto;margin-top: 10px;background: #FFFFFF;padding: 5px 0;">
								<view style="display: flex;flex-flow: wrap;text-align:center;justify-content:space-between;margin-left:30px;margin-right:30px;margin-bottom: 10px;">
									<view style="width: 50px;background-color: #C0C0C0;border-radius: 10px;" @click="bianshu = true,isRang = false">1遍</view>
									<view style="width: 50px;background-color: #C0C0C0;border-radius: 10px;" @click="bianshu = true,isRang = false">2遍</view>
									<view style="width: 50px;background-color: #C0C0C0;border-radius: 10px;" @click="bianshu = true,isRang = false">3遍</view>
									<view style="width: 50px;background-color: #C0C0C0;border-radius: 10px;" @click="bianshu = true,isRang = false">4遍</view>
								</view>
								<view style="display: flex;flex-flow: wrap;text-align:center;justify-content:space-between;margin-left:30px;margin-right:30px;margin-bottom: 10px;">
									<view style="width: 50px;background-color: #C0C0C0;border-radius: 10px;" @click="bianshu = true,isRang = false">5遍</view>
									<view style="width: 50px;background-color: #C0C0C0;border-radius: 10px;" @click="bianshu = true,isRang = false">6遍</view>
									<view style="width: 50px;background-color: #C0C0C0;border-radius: 10px;" @click="bianshu = true,isRang = false">7遍</view>
									<view style="width: 50px;background-color: #C0C0C0;border-radius: 10px;" @click="bianshu = true,isRang = false">8遍</view>
								</view>
								<view style="display: flex;flex-flow: wrap;text-align:center;justify-content:space-between;margin-left:30px;margin-right:30px;">
									<view style="width: 50px;background-color: #C0C0C0;border-radius: 10px;" @click="bianshu = true,isRang = false">9遍</view>
									<view style="width: 50px;background-color: #C0C0C0;border-radius: 10px;" @click="bianshu = true,isRang = false">10遍</view>
									<view style="width: 50px;background-color: #C0C0C0;border-radius: 10px;" @click="bianshu = true,isRang = false">11遍</view>
									<view style="width: 50px;background-color: #C0C0C0;border-radius: 10px;" @click="bianshu = true,isRang = false">12遍</view>
								</view>
							</view>
						</view>
						<view class="item_head">
							<view class="head_tab" @click="to_porject">
								<text>施工区域</text>
								<view class="" v-if="isporject">
								</view>
							</view>
							<view class="head_tab" @click="to_car">
								<text>车辆</text>
								<view class="" v-if="iscar">
								</view>
							</view>
						</view>
						<view class="" v-if="isporject">
							<view  class="item_li" style="color: #C0C0C0">
								<text class="text1">工区</text>
								<text class="text2">开始时间</text>
								<image src="../../static/2/11.png" mode=""></image>
							</view>
							<view class="" style="height: 320rpx;overflow: auto;">
								<view style="padding-top: 20rpx;" class="item_li" @click="toselect(ita)" v-for="ita in gongList">
									<text class="text1">{{ita.areaName}}</text>
									<text class="text2">{{ita.startTime}}</text>
									<text class="text2">{{ita.endTime}}</text>
									<image :src="ita.isimg ?'../../static/2/10.png' : '../../static/2/11.png'" mode="">
									</image>
								</view>
							</view>
						</view>
						<view class="" v-if="iscar">
							<view class="item_li" style="color: #C0C0C0;">
								<text style="width: 80rpx;text-align: center;">状态</text>
								<text style="width: 140rpx;text-align: center;">车牌号</text>

								<text style="width: 100rpx;text-align: center;">作业类型</text>
								<image src="../../static/2/11.png" mode=""></image>
							</view>

							<view class="" style="height: 320rpx;overflow: auto;">
								<view class="" style="height: 320rpx;overflow: auto;">
									<view class="item_li" @click="toselect2(ite)"  v-for="ite in cheList">
										<text
											style="width: 80rpx;text-align: center;background-color: #d8f5d8;color: #3ecf3b;border-radius: 20rpx;">{{ite.status}}</text>
										<text style="width: 140rpx;text-align: center;">{{ite.vehicleDesc}}</text>

										<text style="width: 100rpx;text-align: center;">{{ite.typeName}}</text>
										<image :src="ite.isimg2 ?'../../static/2/10.png' : '../../static/2/11.png'" mode="">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="item_cont2" style="height: auto;">
						<view class="cont" style="border-bottom: 1rpx #C0C0C0 solid;">
							<view class="cont_li">
								<text class="title0">强夯详情</text>
							</view>
						</view>
						<view class="cont" >
							<view class="cont_li" style="width: 33.33%;">
								<text class="title0">夯击点总数</text>
								<text class="title1" style="color: #000;">DFS123</text>
							</view>
							<view class="cont_li" style="width: 33.33%;">
								<text class="title0">夯击遍数</text>
								<text class="title1" style="color: #000;">满夯</text>
							</view>
							<view class="cont_li" style="width: 33.33%;">
								<text class="title0">夯击总次数</text>
								<text class="title1" style="color: #000;">3</text>
							</view>
						</view>
					</view>
					<view class="item_cont2" style="height: auto;">
						<view class="cont" style="border-bottom: 1rpx #C0C0C0 solid;">
							<view class="cont_li">
								<text class="title0">施工时段</text>
							</view>
						</view>
						<view class="cont">
							<view class="cont_li" style="width: 100%;">
								<text class="title1" style="color: #000;">2021.05.20 12:00:00  至  2021.07.16 12:00:00</text>
							</view>
						</view>
					</view>
				</view>
				<view>
					<!-- 普通弹窗 -->
					<uni-popup ref="popup" @change="change">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<view class="pop_box">
								<view class="pop_search">
									<text class="cuIcon-search"></text>
									<input type="text" v-model="filterProjectName" placeholder="请输入项目" />
									<text class="text3" @click="searchProject()">搜索</text>
								</view>
								<view class="pop_cont">
									<view class="pop_item" @click="to_porjectLi(itm)" v-for="itm in projectDate">
										<text>{{itm.name}}</text>
										<image src="../../static/2/20.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</uni-popup>
				</view>
				<view>
					<!-- 普通弹窗 -->
					<uni-popup ref="popupLi" @change="change">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<view class="porjiectLi">
								<view class="item">
									<view class="item_cont">
										<view class="item_search" @click="to_search()">
											<input type="text" value="" placeholder="请选择项目" />
											<image src="../../static/2/00.png" mode=""></image>
										</view>
										<view class="item_headtab">
											<text @click="quanbus" :style="quanbu ? 'background-color: #FFFFFF;' : 'background-color: #e6e6e6;' ">全部</text>
											<text @click="manhangs" :style="manhang ? 'background-color: #FFFFFF;' : 'background-color: #e6e6e6;' ">满夯</text>
											<text @click="dianhangs" :style="dianhang ? 'background-color: #FFFFFF;' : 'background-color: #e6e6e6;' ">点夯</text>
										</view>
										<view class="item_head">
											<view class="head_tab" @click="to_porject">
												<text>施工区域</text>
												<view class="" v-if="isporject">
												</view>
											</view>
											<view class="head_tab" @click="to_car">
												<text>车辆</text>
												<view class="" v-if="iscar">
												</view>
											</view>
										</view>
										<view class="" v-if="isporject">
											<view class="item_li" style="color: #C0C0C0;">
												<text class="text1">工区</text>
												<text class="text2">开始时间</text>
												<image src="../../static/2/11.png" mode=""></image>
											</view>
											<!-- <view class="" style="height: 320rpx;overflow: auto;">
												<view class="item_li" @click="toselect">
													<text class="text1">001#工区</text>
													<text class="text2">2021/08/01/ 12:00:00</text>
													<image
														:src="isimg ?'../../static/2/10.png' : '../../static/2/11.png'"
														mode=""></image>
												</view>
											</view> -->
										</view>
										<view class="" v-if="iscar">
											<view class="item_li" style="color: #C0C0C0;">
												<text style="width: 80rpx;text-align: center;">状态</text>
												<text style="width: 140rpx;text-align: center;">车牌号</text>
												<text style="width: 100rpx;text-align: center;">作业类型</text>
												<image src="../../static/2/11.png" mode=""></image>
											</view>
											<!-- <view class="" style="height: 320rpx;overflow: auto;">
												<view class="item_li" @click="toselect2">
													<text
														style="width: 80rpx;text-align: center;background-color: #d8f5d8;color: #3ecf3b;border-radius: 20rpx;">在线</text>
													<text style="width: 140rpx;text-align: center;">陕A35888</text>

													<text style="width: 100rpx;text-align: center;">满夯</text>
													<image
														:src="isimg2 ?'../../static/2/10.png' : '../../static/2/11.png'"
														mode=""></image>
												</view>
											</view> -->
										</view>
									</view>
									<view class="item_mid">
										<view class="title1">
											强夯详情
										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">标段信息</text>
												<text>基础建设</text>
											</view>
											<view class="cont_li">
												<text class="title0">施工单位</text>
												<text>南三地基与基础建设</text>
											</view>
											<view class="cont_li">
												<text class="title0">监理单位</text>
												<text>南三地基</text>
											</view>
										</view>
									</view>
									<view class="item_foot">
										<view class="title">
											项目名称/0南三地基与基础建设K3
										</view>
										<view class="cont">
											<text>2021.08.01 12:00:00</text>
											<text style="color: #c0c0c0;">至</text>
											<text>2021.08.12 12:00:00</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-popup>
				</view>
				<view>
					<!-- 普通弹窗 -->
					<uni-popup ref="popupCar" @change="change">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<view class="carLi">
								<view class="item">
									<view id="item_cont">
										<view class="title1">
											<text>陕A85622</text>
											<text
												style="padding: 5rpx 20rpx;background-color: #d8f5d8;font-size: 20rpx;border-radius: 20rpx;margin: 0 20rpx;color: #3ecf3b;">在线</text>
																					</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">时速/m</text>
												<text>11</text>
											</view>
											<view class="cont_li">
												<text class="title0">高程/m</text>
												<text>6</text>
											</view>
											<view class="cont_li">
												<text class="title0">振动</text>
												<text>555</text>
											</view>
										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">时速/m</text>
												<text>11</text>
											</view>
											<view class="cont_li">
												<text class="title0">高程/m</text>
												<text>6</text>
											</view>
										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">时速/m</text>
												<text>11</text>
											</view>
											<view class="cont_li">
												<text class="title0">高程/m</text>
												<text>6</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-popup>
				</view>
				<view>
					<!-- 普通弹窗 -->
					<uni-popup ref="popupHangkong" @change="change">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<view class="hangkongxq">
								<view class="item">
									<view class="item_cont">
										<view class="title1">
											<text>夯孔详情</text>
											<text
												style="padding: 5rpx 20rpx;background-color: #fdeed8;font-size: 20rpx;border-radius: 20rpx;margin: 0 20rpx;color: #f6ac3b;">合格</text>
										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">夯击编号</text>
												<text>11</text>
											</view>
											<view class="cont_li">
												<text class="title0">强夯类型</text>
												<text>6</text>
											</view>
											<view class="cont_li">
												<text class="title0">夯击标准次数</text>
												<text>555</text>
											</view>
										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">桩号</text>
												<text>11</text>
											</view>
											<view class="cont_li">
												<text class="title0">总夯沉量/cm</text>
												<text>6</text>
											</view>
											<view class="cont_li">
												<text class="title0">平均夯沉量/cm</text>
												<text>6</text>
											</view>
										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">锤重/t</text>
												<text>11</text>
											</view>
											<view class="cont_li">
												<text class="title0">锤半径/m</text>
												<text>6</text>
											</view>
										</view>
									</view>
									<view class="item_cont2">
										<view class="cont" style="border-bottom: 1rpx #C0C0C0 solid;">
											<view class="cont_li">
												<text class="title0">序号</text>
											</view>
											<view class="cont_li">
												<text class="title0">落距/m</text>
											</view>
											<view class="cont_li">
												<text class="title0">夯机能/KN.m</text>
											</view>
											<view class="cont_li">
												<text class="title0">中心距</text>
											</view>
										</view>
										<view class="cont" >
											<view class="cont_li">
												<text class="title1">标准值</text>
											</view>
											<view class="cont_li">
												<text class="title1">3.67</text>
											</view>
											<view class="cont_li">
												<text class="title1">1000.00</text>
											</view>
											<view class="cont_li">
												<text class="title1">0.00</text>
											</view>
										</view>
										<view class="" style="width: 100%;height: 320rpx;overflow: auto;">
											<view class="cont">
												<view class="cont_li">
													<text>11</text>
												</view>
												<view class="cont_li">
													<text>6</text>
												</view>
												<view class="cont_li">
													<text>555</text>
												</view>
												<view class="cont_li">
													<text>555</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-popup>
				</view>
				<view>
					<!-- 普通弹窗 -->
					<uni-popup ref="popupDianhong" @change="change">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<view class="dianHong">
								<view class="item" style="height: auto;">
									<view class="item_cont">
										<view class="title1">
											<text>强夯详情</text>
										</view>
										<view class="cont">
											<view class="cont_li">
												<text class="title0">夯击点总数</text>
												<text>DFS123</text>
											</view>
											<view class="cont_li">
												<text class="title0">夯击遍数</text>
												<text>满夯</text>
											</view>
											<view class="cont_li">
												<text class="title0">夯击总次数</text>
												<text>3</text>
											</view>
										</view>
									</view>
									<view class="item_cont2">
										<view class="cont" style="border-bottom: 1rpx #C0C0C0 solid;">
											<view class="cont_li">
												<text class="title0">强夯详情</text>
											</view>
										</view>
										<view class="cont" >
											<view class="cont_li" style="width: 33.33%;">
												<text class="title0">夯击点总数</text>
												<text class="title1">DFS123</text>
											</view>
											<view class="cont_li" style="width: 33.33%;">
												<text class="title0">夯击遍数</text>
												<text class="title1">满夯</text>
											</view>
											<view class="cont_li" style="width: 33.33%;">
												<text class="title0">夯击总次数</text>
												<text class="title1">3</text>
											</view>
										</view>
									</view>
									<view class="item_cont2" style="height: auto;">
										<view class="cont" style="border-bottom: 1rpx #C0C0C0 solid;">
											<view class="cont_li">
												<text class="title0">施工时段</text>
											</view>
										</view>
										<view class="cont">
											<view class="cont_li" style="width: 100%;">
												<text class="title1">2021.05.20 12:00:00  至  2021.07.16 12:00:00</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-popup>
				</view>
			</view>




		</view>




		</view>



	</view>
</template>

<script>
import MapContainer from '@/components/mapContainer.vue'
import socket from  '../yashi/socketio.js'
	export default {
		components: {
			MapContainer
		},
		data() {
			return {
				banner: [],
				control: true,
				mark: false,
				history: false,
				type: 'bottom',
				qianghanglist:[],//强夯列表
				socketDetial:{},//socket

				// 实时监控
				isporject: true,
				iscar: false,
				isimg: false,
				isimg2: false,
				datetimerange: [],
				control_index: true,

				// 不显示控制新增
				xiangqing: false,
				cheliang: false,
				bianshu: false,
				// 正式工作
				mcontrol: false,
				misporject: true,
				miscar: false,
				misimg: false,
				misimg2: false,
				// mdatetimerange: [],
				mcontrol_index: true,
				isRang: true,
				showBian: false,
				cheList: [],
				gongList: [],
				dianObj: {},
				qingObj: {},
				projectDate: [],
				allProjectDate: [],
				filterProjectName: '',

				// 轨迹
				mask:false,

				quanbu:true,
				manhang:false,
				dianhang:false,

				mquanbu:true,
				mmanhang:false,
				mdianhang:false,
				isReady :false,
				// 数据
				mapUrl: '',
				longitude: 102.74157,
				latitude: 25.04564,

			}
		},
		onLoad() {
			//socket
			// let muts={type: 0x501, message: "255", msgflag: 0}
			// socket.emit('connect',muts)
			// socket.on('chat',(data)=>{
			// 	console.log(data,'client')
			// 	this.socketDetial = data.data
			// })
			// let datas = {
			// 	pageCurrent: 1,//默认填写1
			// 	  pageSize: 10,//每页条数
			// 	  sectionCode: "0010080017011",//项目标段code
			// 	  dataType: "5",//4：土方压实
			// 	  workState: 2 //压实固定传400
			// }
			// this.$HTTP('/project/area/selectWorkAreaList', datas, 'POST').then((res) => {
			// 	console.log('车辆', res)
			// });
			//强夯实时监控列表暂时没有数据后期你们替换即可
			let jiankong = {
					pageCurrent:1,//当前页
			    pageSize:50,//每页条数
			    sectionCode: "0010080017009",//标段 为空会查所有的
				dataType: "5",
				workState: 200
				}
			this.$HTTP('/project/area/selectWorkAreaList', jiankong, 'POST').then((res) => {
				//mock 假数据

				// var mockItemStr=
				// `[{
				// 	"pageCurrent": null,
				// 	"pageSize": null,
				// 	"id": 76,
				// 	"dataType": "10",
				// 	"projectCode": "0010080017011",
				// 	"projectName": "咸阳机场三期二标段",
				// 	"areaName": "飞行区工程二标-摊铺压实3",
				// 	"createUser": "zhaofeihu",
				// 	"createDate": "2021-07-12T10:22:59.000+0800",
				// 	"updateUser": null,
				// 	"updateDate": "2021-07-12T10:22:59.000+0800",
				// 	"isDelete": 0,
				// 	"areaRange": "POLYGON((12104812.505893216))",
				// 	"remarks": "",
				// 	"processId":"a26f3a7755a143f6b97dd90973121c8c",
				// 	"startTime":"2021-02-05 11:22:12",
				// 	"endTime":"2021-02-05 11:22:12",
				// 	"state": 200
				// 	},

				// 	{
				// 	"pageCurrent": null,
				// 	"pageSize": null,
				// 	"id": 76,
				// 	"dataType": "10",
				// 	"projectCode": "0010080017011",
				// 	"projectName": "咸阳机场三期二标段",
				// 	"areaName": "飞行区工程二标-摊铺压实3",
				// 	"createUser": "zhaofeihu",
				// 	"createDate": "2021-07-12T10:22:59.000+0800",
				// 	"updateUser": null,
				// 	"updateDate": "2021-07-12T10:22:59.000+0800",
				// 	"isDelete": 0,
				// 	"areaRange": "POLYGON((12104812.505893216))",
				// 	"remarks": "",
				// 	"processId":"13291d3a936d4354ab2f6fbb6218e4ae",
				// 	"startTime":"2021-02-05 11:22:12",
				// 	"endTime":"2021-02-05 11:22:12",
				// 	"state": 200
				// 	}
				// 	]
				// `
				// var mockItem = JSON.parse(mockItemStr)

				// console.log("mock的数据",mockItem)

				// res.data.obj.items =  mockItem



				this.qianghanglist = res.data.obj.items
			});

			//  调取施工列表
			let para1 = {
				pageCurrent:1,//当前页
		    pageSize:10,//每页条数
		    sectionCode: "0010080017011",//标段 为空会查所有的
			}
			this.$HTTP('/heavy/selectHeavyTampWorkAreaInfoList', para1, 'POST').then((res) => {
				this.gongList = res.data.obj.items
			});
					this.$HTTP('/superMap/list', '', 'GET').then((res) => {
				this.mapUrl =  res.data.obj[0].supermapUrl
				this.longitude =  res.data.obj[0].longitude
				this.latitude =  res.data.obj[0].latitude
				console.log("数据撒打算",this.mapUrl)
				this.isReady = true
			});
			// 调取车辆列表
			let para = {
				pageCurrent:1,
				pageSize:10,
				projectId:204,
				processId:'qh08251504',
				type:5
			}
			this.$HTTP('/vehicle/selectVehicleList', para, 'POST').then((res) => {
				this.cheList = res.data.obj.list
				console.log(this.cheList)
			});


			// 孔位数据列表
			let para2 = {
				measureAreaId: 80,//工区id
		    workModel: "1",//工作模式(1:点夯，2:满夯)
		    processId: "5121217871164343bf5c824e4e0ceab2"//流程id
			}
			this.$HTTP('/heavy/selectHeavyTampingStakeDataList', para2, 'POST').then((res) => {
				console.log('孔位数据列表', res)
			});

			// 夯点统计 bianshu
			let para3 = {
				sectionCode: "0010080017011",//标段code
		    	measureAreaId: "80",//工区id
		    	workModel: "",//工作模式(1:点夯，2:满夯)
		    	processId: "5121217871164343bf5c824e4e0ceab2"//流程id(遍数对应的是流程id)
			}
			this.$HTTP('/heavy/heavyTampingStatistics', para3, 'POST').then((res) => {
				this.dianObj = res.data.obj
			});

		},
		methods: {
			to_control() {
				this.control_index = true
				this.control = true
				this.mcontrol = false
				this.mcontrol_index = false
				this.mark = false
				this.history = false
			},
			to_mark() {
				this.control = false
				this.control_index = false
				this.mcontrol = true
				this.mcontrol_index = true
				this.mark = true
				this.history = false
			},
			to_history() {
				this.control = false
				this.mark = false
				this.history = true
				this.mask = true

			},
			close_mask(){
				this.mask = false
			},


			quanbus(){
				this.quanbu = true
				this.manhang = false
				this.dianhang = false
			},
			manhangs(){
				this.quanbu = false
				this.manhang = true
				this.dianhang = false
				// this.control_index = false
				this.type = 'bottom'
				this.$refs.popupDianhong.open(this.type)
			},
			dianhangs(){
				this.quanbu = false
				this.manhang = false
				this.dianhang = true
				// this.control_index = false
				this.type = 'bottom'
				this.$refs.popupDianhong.open(this.type)
			},

			todata() {
				this.$HTTP('/api/index', '', 'GET').then((res) => {

					uni.stopPullDownRefresh();
					this.banner = res.data.data.banner

					console.log(this.banner.length)
					console.log('喔喔23')
					if (this.banner.length == 6) {
						this.ishide = false
						console.log(this.banner.length)
					}


				})
			},

			// 实时监控
			to_porject() {
				this.isporject = true
				this.iscar = false
			},
			to_car() {
				this.isporject = false
				this.iscar = true
			},
			toselect(item) {


				// 孔位数据列表
				let para2 = {
					measureAreaId: 80,//工区id
			    	workModel: "1",//工作模式(1:点夯，2:满夯)
			    	processId: item.processId//流程id
				}

				if (item.isimg) {
					this.$refs.refMap.removeHole()
					item.isimg = false
				} else {
					this.$HTTP('/heavy/selectHeavyTampingStakeDataList', para2, 'POST').then((res) => {
						console.log('孔位数据列表', res)
						if (res.data.obj.length<1){
								uni.showToast({
								title: '此区域孔位信息'
							})
							return
						}
						this.$refs.refMap.createHole(res.data.obj)
					});
					item.isimg = true
				}
				this.$forceUpdate()




			},
			toselect2(item) {

				if (item.isimg2) {
					this.$refs.refMap.removeCar()
					item.isimg2 = false
				} else {
					//点击事件
					//socket连接
					// let abc = JSON.stringify(muts)
					let muts={type: 0x501, message: item.vehileId, msgflag: 0}
					socket.emit('connect',muts)
					//监听消息 车辆坐标变换 以及数据变化
					socket.on('chat',(data)=>{
						console.log(data,'client')
						this.socketDetial = data.data
						this.cheliangXiangqing.map((m)=>{
							if (m.vehicleName == this.socketDetial.dvrid ){
								this.cheliangXiangqing.latitude =this.socketDetial.y
								this.cheliangXiangqing.longidude =this.socketDetial.x
								if (m.vehicleName == item.vehicleName){
									item.latitude =this.socketDetial.y
									item.longidude =this.socketDetial.x
								}
							}
						})
					})
					this.$refs.refMap.createCar(item)
					item.isimg2 = true
				}
				this.$forceUpdate()
			},


			to_search() {
				this.type = 'bottom'
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(this.type)

				this.$HTTP('/projects/gets', '', 'GET').then((res) => {
					this.projectDate = JSON.parse(JSON.stringify(res.data.obj));
					this.allProjectDate = JSON.parse(JSON.stringify(res.data.obj));
					this.$forceUpdate()
				});
				// this.$refs.popupCar.open(this.type)
			},
			to_map_car() {
				this.control_index = false
				this.type = 'bottom'
				this.$refs.popupCar.open(this.type)
			},
			to_hangkong() {
				this.control_index = false
				this.type = 'bottom'
				this.$refs.popupHangkong.open(this.type)
			},


			to_porjectLi() {
				this.isporject = false
				this.iscar = true
				this.type = 'bottom'
				this.$refs.popup.close(this.type)
				this.$refs.popupLi.open(this.type)
			},
			caritem() {
				this.isporject = false
				this.iscar = true
				this.type = 'bottom'
				this.$refs.popupcarItem.open(this.type)
			},
			online() {
				this.isporject = false
				this.iscar = true
				this.type = 'bottom'
				this.$refs.popupcarItem.open(this.type)
			},
			recy() {
				this.type = 'bottom'
				// this.$refs.popupcarItem.close(this.type)
			},
			// 实时监控




			// 正式工作
			searchProject() {
				this.projectDate = this.allProjectDate.filter(project=>{
					return (project.name.indexOf(this.filterProjectName.trim()) > -1);
				})
			},
			mquanbus(){
				this.mquanbu = true
				this.mmanhang = false
				this.mdianhang = false
			},
			mmanhangs(){
				this.mquanbu = false
				this.mmanhang = true
				this.mdianhang = false
				// this.control_index = false
				this.type = 'bottom'
				this.$refs.popupDianhong.open(this.type)
			},
			mdianhangs(){
				this.mquanbu = false
				this.mmanhang = false
				this.mdianhang = true
				// this.control_index = false
				this.type = 'bottom'
				this.$refs.popupDianhong.open(this.type)
			},

			mto_porject() {
				this.misporject = true
				this.miscar = false
			},
			mto_car() {
				this.misporject = false
				this.miscar = true
			},
			mtoselect() {
				this.misimg = true
			},
			mtoselect2() {
				this.misimg2 = true
			},


			mto_search() {
				this.type = 'bottom'
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.mpopup.open(this.type)

				// this.$refs.popupCar.open(this.type)
			},
			mto_map_car() {
				this.mcontrol_index = false
				this.type = 'bottom'
				this.$refs.mpopupCar.open(this.type)
			},
			mto_porjectLi() {
				this.misporject = false
				this.miscar = true
				this.type = 'bottom'
				this.$refs.mpopup.close(this.type)
				this.$refs.popupLi.open(this.type)
			},
			mcaritem() {
				this.misporject = false
				this.miscar = true
				this.type = 'bottom'
				this.$refs.mpopupcarItem.open(this.type)
			},
			monline() {
				this.misporject = false
				this.miscar = true
				this.type = 'bottom'
				this.$refs.mpopupcarItem.open(this.type)
			},
			mrecy() {
				this.type = 'bottom'
				// this.$refs.popupcarItem.close(this.type)
			},
			// 正式工作
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},

			holeDetail(e){
				let para4 = {
					stakeId: e.id//夯孔id
				}
				this.$HTTP('/heavy/selectHeavyStakeDetails', para4, 'POST').then((res) => {
					console.log('夯孔详情信息', res, res.data.obj)
					this.qingObj = res.data.obj
				});
				this.xiangqing = true
			}



		}
	}
</script>

<style lang="scss">
	.pages {
		// background-image: url('http://picture.ik123.com/uploads/allimg/170629/12-1F629112239.jpg'); //网络图片
		height: 100vh;
		background-size: 100% 100%;
		position: relative;
	}

	.tabbox {
		width: 100%;
		height: 80rpx;
		background-color: rgba(0, 0, 0, 0.8);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.tab {
			width: 250rpx;
			height: 50rpx;
			line-height: 50rpx;
			// background-color: #4CD964;
			border-right: 1rpx #808080 solid;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;

			}

			text {
				color: #FFFFFF;
				text-align: center;
				font-size: 24rpx;
				margin-left: 30rpx;
			}
		}
	}

	.content {}

	.controls {
		width: 750rpx;

		.map {}

		.item {
			width: 750rpx;
			height: 730rpx;

			position: absolute;
			bottom: 0;
			left: 0;

			.item_cont {
				margin: 0 10rpx;
				padding-top: 20rpx;
				height: 610rpx;
				background-color: #FFFFFF;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;

				.item_search {
					margin: 0rpx 40rpx;
					height: 60rpx;
					background-color: #e6e6e6;
					border-radius: 60rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					overflow: hidden;

					input {
						width: 500rpx;
						margin-left: 80rpx;
						text-align: center;
						font-size: 24rpx;
					}

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.item_headtab{
					margin: 10rpx 40rpx;
					height: 60rpx;
					background-color: #e6e6e6;
					border-radius: 60rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					overflow: hidden;
					text{
						width: 150rpx;
						text-align: center;
						font-size: 20rpx;
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 60rpx;
						// background-color: #FFFFFF;
					}
				}

				.item_head {
					margin: 10rpx auto 0;
					width: 200rpx;
					height: 60rpx;
					font-size: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.head_tab {
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-direction: column;
						height: 40rpx;

						&:active {
							color: #0251FF;
						}

						view {
							width: 40rpx;
							border-radius: 10rpx;
							height: 4rpx;
							background-color: #0251ff;
						}
					}
				}

				.item_li {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					padding: 0 30rpx;
					min-height: 60rpx;
					font-size: 20rpx;
					border-top: 1rpx #e6e6e6 solid;

					.text1 {
						width: 150rpx;
						text-align: center;
						// background-color: #007AFF;
					}

					.text2 {
						width: 250rpx;
						text-align: center;
						// background-color: #007AFF;
					}

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			.item_cont2 {
				width: 730rpx;
				height: 460rpx;
				margin: 10rpx;

				background-color: #FFFFFF;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				border-radius: 20rpx;
				overflow: hidden;
				.cont {
					width: 730rpx;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					margin: 10rpx;
					.cont_li {
						width: 200rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						height: 40rpx;

						// line-height: 100rpx;
						.title0 {
							color: #C0C0C0;
						}
						.title1{
							color: #4CD964;
						}
					}
				}
			}

			.item_foot {
				width: 100%;
				height: 100rpx;
				background-color: #FFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				box-shadow: 8rpx 8rpx 18rpx 8rpx #888888;

				.item_tab {
					width: 250rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-right: 1rpx #808080 solid;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					text {
						margin-top: 10rpx;
						font-size: 20rpx;
					}
				}
			}

		}

		.pop_box {
			width: 100%;
			height: 82vh;
			padding-top: 40rpx;
			background-color: #FFFFFF;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;

			.pop_search {
				margin: 0 30rpx;
				height: 60rpx;
				padding-left: 30rpx;
				background-color: #e6e6e6;
				border-radius: 60rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.text3 {
					width: 100rpx;
					height: 52rpx;
					border-radius: 60rpx;
					margin-right: 4rpx;
					background-color: #FFFFFF;
					font-size: 24rpx;
					line-height: 52rpx;
					text-align: center;
				}

				input {
					width: 500rpx;
					text-align: left;
					font-size: 24rpx;
				}
			}

			.pop_cont {
				margin: 30rpx;
				padding-top: 30rpx;
				height: 600rpx;
				// background-color: #007AFF;
				overflow: auto;
				box-shadow: 0px 0px 20rpx 5rpx #e6e6e6;

				.pop_item {
					margin: 0rpx 10rpx 0;
					padding: 10rpx 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx #e6e6e6 solid;

					text {
						font-size: 24rpx;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.porjiectLi {
			width: 750rpx;

			.item {
				width: 750rpx;
				height: 900rpx;

				position: absolute;
				bottom: 0;
				left: 0;

				.item_cont {
					margin: 10rpx;
					padding-top: 20rpx;
					height: 480rpx;
					background-color: #FFFFFF;
					border-radius: 20rpx;

					.item_search {
						margin: 0rpx 40rpx;
						height: 60rpx;
						background-color: #e6e6e6;
						border-radius: 60rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						overflow: hidden;

						input {
							width: 500rpx;
							margin-left: 80rpx;
							text-align: center;
							font-size: 24rpx;
						}

						image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					.item_head {
						margin: 10rpx auto 0;
						width: 200rpx;
						height: 60rpx;
						font-size: 20rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.head_tab {
							display: flex;
							justify-content: space-between;
							align-items: center;
							flex-direction: column;
							height: 40rpx;

							&:active {
								color: #0251FF;
							}

							view {
								width: 40rpx;
								border-radius: 10rpx;
								height: 4rpx;
								background-color: #0251ff;
							}
						}
					}

					.item_li {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						padding: 0 30rpx;
						min-height: 60rpx;
						font-size: 20rpx;
						border-top: 1rpx #e6e6e6 solid;

						.text1 {
							width: 150rpx;
							text-align: center;
							// background-color: #007AFF;
						}

						.text2 {
							width: 250rpx;
							text-align: center;
							// background-color: #007AFF;
						}

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.item_mid {
					width: 730rpx;
					height: 200rpx;
					margin: 10rpx;
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					border-radius: 20rpx;
					overflow: hidden;

					.title1 {
						width: 730rpx;
						height: 60rpx;
						line-height: 60rpx;
						padding-left: 60rpx;
						border-bottom: 1rpx #c0c0c0 solid;
					}

					.cont {
						width: 730rpx;
						padding-left: 60rpx;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

						.cont_li {
							width: 200rpx;
							padding-right: 60rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;
							font-size: 20rpx;
							height: 50rpx;
							line-height: 50rpx;

							.title0 {
								color: #c0c0c0;
							}

						}


					}
				}

				.item_foot {
					width: 730rpx;
					height: 130rpx;
					margin: 0 10rpx;
					overflow: hidden;
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					border-radius: 20rpx;

					.title {
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						padding-left: 60rpx;
						border-bottom: 1rpx #c0c0c0 solid;
					}

					.cont {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						text {
							margin: 10rpx 20rpx;
							font-size: 20rpx;
						}

					}
				}

			}
		}

		.carLi {
			#item_cont {
				width: 730rpx;
				height: 500rpx;
				margin: 0 10rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background-color: #FFFFFF;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				overflow: hidden;

				.title1 {
					width: 730rpx;
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 100rpx;
					border-bottom: 1rpx #C0C0C0 solid;
				}

				.cont {
					width: 730rpx;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					margin: 10rpx;
					.cont_li {
						width: 200rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						height: 80rpx;

						// line-height: 100rpx;
						.title0 {
							color: #C0C0C0;
						}
					}
				}


			}
		}


		.hangkongxq {
			.item{
				width: 750rpx;
				height: 900rpx;
				.item_cont {
					width: 730rpx;
					height: 380rpx;
					margin: 0 10rpx;
					// position: absolute;
					// bottom: 0;
					// left: 0;
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					border-radius: 20rpx;

					overflow: hidden;

					.title1 {
						width: 730rpx;
						height: 80rpx;
						line-height: 80rpx;
						padding-left: 100rpx;
						border-bottom: 1rpx #C0C0C0 solid;
					}

					.cont {
						width: 730rpx;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						margin: 10rpx;
						.cont_li {
							width: 200rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							font-size: 20rpx;
							height: 70rpx;

							// line-height: 100rpx;
							.title0 {
								color: #C0C0C0;
							}
						}
					}
				}
				.item_cont2 {
					width: 730rpx;
					height: 460rpx;
					margin: 10rpx;

					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					border-radius: 20rpx;
					overflow: hidden;
					.cont {
						width: 730rpx;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						margin: 10rpx;
						.cont_li {
							width: 200rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							font-size: 20rpx;
							height: 40rpx;

							// line-height: 100rpx;
							.title0 {
								color: #C0C0C0;
							}
							.title1{
								color: #4CD964;
							}
						}
					}


				}
			}



		}

		.dianHong {
			.item{
				width: 750rpx;
				height: 640rpx;
				.item_cont {
					width: 730rpx;
					height: 380rpx;
					margin: 0 10rpx;
					// position: absolute;
					// bottom: 0;
					// left: 0;
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					border-radius: 20rpx;

					overflow: hidden;

					.title1 {
						width: 730rpx;
						height: 80rpx;
						line-height: 80rpx;
						padding-left: 100rpx;
						border-bottom: 1rpx #C0C0C0 solid;
					}

					.cont {
						width: 730rpx;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						margin: 10rpx;
						.cont_li {
							width: 200rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							font-size: 20rpx;
							height: 70rpx;

							// line-height: 100rpx;
							.title0 {
								color: #C0C0C0;
							}
						}
					}
				}
				.item_cont2 {
					width: 730rpx;
					height: 200rpx;
					margin: 10rpx;

					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					border-radius: 20rpx;
					overflow: hidden;
					.cont {
						width: 730rpx;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						margin: 10rpx;
						.cont_li {
							width: 180rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							font-size: 20rpx;
							height: 60rpx;

							// line-height: 100rpx;
							.title0 {
								color: #C0C0C0;
							}
							.title1{
								color: #000000;
							}
						}
					}


				}
			}



		}





	}



	.marks {
		width: 750rpx;

		.map {}

		.item {
			width: 750rpx;
			height: 730rpx;

			position: absolute;
			bottom: 0;
			left: 0;

			.item_cont {
				margin: 0 10rpx;
				padding-top: 20rpx;
				height: 610rpx;
				background-color: #FFFFFF;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;

				.item_search {
					margin: 0rpx 40rpx;
					height: 60rpx;
					background-color: #e6e6e6;
					border-radius: 60rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					overflow: hidden;

					input {
						width: 500rpx;
						margin-left: 80rpx;
						text-align: center;
						font-size: 24rpx;
					}

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.item_headtab{
					margin: 10rpx 40rpx;
					height: 60rpx;
					background-color: #e6e6e6;
					border-radius: 60rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					overflow: hidden;
					text{
						width: 150rpx;
						text-align: center;
						font-size: 20rpx;
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 60rpx;
						// background-color: #FFFFFF;
					}
				}

				.item_head {
					margin: 10rpx auto 0;
					width: 200rpx;
					height: 60rpx;
					font-size: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.head_tab {
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-direction: column;
						height: 40rpx;

						&:active {
							color: #0251FF;
						}

						view {
							width: 40rpx;
							border-radius: 10rpx;
							height: 4rpx;
							background-color: #0251ff;
						}
					}
				}

				.item_li {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					padding: 0 30rpx;
					min-height: 60rpx;
					font-size: 20rpx;
					border-top: 1rpx #e6e6e6 solid;

					.text1 {
						width: 150rpx;
						text-align: center;
						// background-color: #007AFF;
					}

					.text2 {
						width: 250rpx;
						text-align: center;
						// background-color: #007AFF;
					}

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.item_foot {
				width: 100%;
				height: 100rpx;
				background-color: #FFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				box-shadow: 8rpx 8rpx 18rpx 8rpx #888888;

				.item_tab {
					width: 250rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-right: 1rpx #808080 solid;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					text {
						margin-top: 10rpx;
						font-size: 20rpx;
					}
				}
			}

		}

		.pop_box {
			width: 100%;
			height: 82vh;
			padding-top: 40rpx;
			background-color: #FFFFFF;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;

			.pop_search {
				margin: 0 30rpx;
				height: 60rpx;
				padding-left: 30rpx;
				background-color: #e6e6e6;
				border-radius: 60rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.text3 {
					width: 100rpx;
					height: 52rpx;
					border-radius: 60rpx;
					margin-right: 4rpx;
					background-color: #FFFFFF;
					font-size: 24rpx;
					line-height: 52rpx;
					text-align: center;
				}

				input {
					width: 500rpx;
					text-align: left;
					font-size: 24rpx;
				}
			}

			.pop_cont {
				margin: 30rpx;
				padding-top: 30rpx;
				height: 600rpx;
				// background-color: #007AFF;
				overflow: auto;
				box-shadow: 0px 0px 20rpx 5rpx #e6e6e6;

				.pop_item {
					margin: 0rpx 10rpx 0;
					padding: 10rpx 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx #e6e6e6 solid;

					text {
						font-size: 24rpx;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.porjiectLi {
			width: 750rpx;

			.item {
				width: 750rpx;
				height: 900rpx;

				position: absolute;
				bottom: 0;
				left: 0;

				.item_cont {
					margin: 10rpx;
					padding-top: 20rpx;
					height: 480rpx;
					background-color: #FFFFFF;
					border-radius: 20rpx;

					.item_search {
						margin: 0rpx 40rpx;
						height: 60rpx;
						background-color: #e6e6e6;
						border-radius: 60rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						overflow: hidden;

						input {
							width: 500rpx;
							margin-left: 80rpx;
							text-align: center;
							font-size: 24rpx;
						}

						image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					.item_head {
						margin: 10rpx auto 0;
						width: 200rpx;
						height: 60rpx;
						font-size: 20rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.head_tab {
							display: flex;
							justify-content: space-between;
							align-items: center;
							flex-direction: column;
							height: 40rpx;

							&:active {
								color: #0251FF;
							}

							view {
								width: 40rpx;
								border-radius: 10rpx;
								height: 4rpx;
								background-color: #0251ff;
							}
						}
					}

					.item_li {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						padding: 0 30rpx;
						min-height: 60rpx;
						font-size: 20rpx;
						border-top: 1rpx #e6e6e6 solid;

						.text1 {
							width: 150rpx;
							text-align: center;
							// background-color: #007AFF;
						}

						.text2 {
							width: 250rpx;
							text-align: center;
							// background-color: #007AFF;
						}

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.item_mid {
					width: 730rpx;
					height: 200rpx;
					margin: 10rpx;
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					border-radius: 20rpx;
					overflow: hidden;

					.title1 {
						width: 730rpx;
						height: 60rpx;
						line-height: 60rpx;
						padding-left: 60rpx;
						border-bottom: 1rpx #c0c0c0 solid;
					}

					.cont {
						width: 730rpx;
						padding-left: 60rpx;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

						.cont_li {
							width: 200rpx;
							padding-right: 60rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;
							font-size: 20rpx;
							height: 50rpx;
							line-height: 50rpx;

							.title0 {
								color: #c0c0c0;
							}

						}


					}
				}

				.item_foot {
					width: 730rpx;
					height: 130rpx;
					margin: 0 10rpx;
					overflow: hidden;
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					border-radius: 20rpx;

					.title {
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						padding-left: 60rpx;
						border-bottom: 1rpx #c0c0c0 solid;
					}

					.cont {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						text {
							margin: 10rpx 20rpx;
							font-size: 20rpx;
						}

					}
				}

			}
		}

		.carLi {
			#item_cont {
				width: 730rpx;
				height: 500rpx;
				margin: 0 10rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background-color: #FFFFFF;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				overflow: hidden;

				.title1 {
					width: 730rpx;
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 100rpx;
					border-bottom: 1rpx #C0C0C0 solid;
				}

				.cont {
					width: 730rpx;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					margin: 10rpx;
					.cont_li {
						width: 200rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						height: 80rpx;

						// line-height: 100rpx;
						.title0 {
							color: #C0C0C0;
						}
					}
				}


			}
		}


		.hangkongxq {
			.item{
				width: 750rpx;
				height: 900rpx;
				.item_cont {
					width: 730rpx;
					height: 380rpx;
					margin: 0 10rpx;
					// position: absolute;
					// bottom: 0;
					// left: 0;
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					border-radius: 20rpx;

					overflow: hidden;

					.title1 {
						width: 730rpx;
						height: 80rpx;
						line-height: 80rpx;
						padding-left: 100rpx;
						border-bottom: 1rpx #C0C0C0 solid;
					}

					.cont {
						width: 730rpx;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						margin: 10rpx;
						.cont_li {
							width: 200rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							font-size: 20rpx;
							height: 70rpx;

							// line-height: 100rpx;
							.title0 {
								color: #C0C0C0;
							}
						}
					}
				}
				.item_cont2 {
					width: 730rpx;
					height: 460rpx;
					margin: 10rpx;

					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					border-radius: 20rpx;
					overflow: hidden;
					.cont {
						width: 730rpx;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						margin: 10rpx;
						.cont_li {
							width: 200rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							font-size: 20rpx;
							height: 40rpx;

							// line-height: 100rpx;
							.title0 {
								color: #C0C0C0;
							}
							.title1{
								color: #4CD964;
							}
						}
					}


				}
			}



		}

		.dianHong {
			.item{
				width: 750rpx;
				height: 640rpx;
				.item_cont {
					width: 730rpx;
					height: 380rpx;
					margin: 0 10rpx;
					// position: absolute;
					// bottom: 0;
					// left: 0;
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					border-radius: 20rpx;

					overflow: hidden;

					.title1 {
						width: 730rpx;
						height: 80rpx;
						line-height: 80rpx;
						padding-left: 100rpx;
						border-bottom: 1rpx #C0C0C0 solid;
					}

					.cont {
						width: 730rpx;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						margin: 10rpx;
						.cont_li {
							width: 200rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							font-size: 20rpx;
							height: 70rpx;

							// line-height: 100rpx;
							.title0 {
								color: #C0C0C0;
							}
						}
					}
				}
				.item_cont2 {
					width: 730rpx;
					height: 200rpx;
					margin: 10rpx;

					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					border-radius: 20rpx;
					overflow: hidden;
					.cont {
						width: 730rpx;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						margin: 10rpx;
						.cont_li {
							width: 180rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							font-size: 20rpx;
							height: 60rpx;

							// line-height: 100rpx;
							.title0 {
								color: #C0C0C0;
							}
							.title1{
								color: #000000;
							}
						}
					}


				}
			}



		}





	}



</style>
